<script setup lang="ts">
import HeaderList from "./components/HeaderList.vue"
import CenterList from "./components/CenterList.vue"
import { ref } from 'vue'
const hotTopicData = ref([
  {
    id: 1,
    text: '2024债务清零成功上岸',
  },
  {
    id: 2,
    text: '资深债友经验谈',
  },
  {
    id: 3,
    text: '负债XX万坦白局',
  },
  {
    id: 4,
    text: '债务转让给第三方怎么处',
  },
  {
    id: 5,
    text: '90后还债日常',
  },
  {
    id: 6,
    text: '......',
  },
])
const hotSpotData = ref([
  {
    id: 1,
    date: '5/17',
    time: '12:00',
    platform: 'XX平台',
    title: '最新政策标题',
    minortitle: '政策全文',
    text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
    user_img: '',
    comment: '发表评论内容',
  },
  {
    id: 3,
    date: '5/17',
    time: '12:00',
    platform: 'XX平台',
    title: '最新政策标题',
    minortitle: '政策全文',
    text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
    user_img: '',
    comment: '发表评论内容',
  },
  {
    id: 2,
    date: '5/17',
    time: '12:00',
    platform: 'XX平台',
    title: '最新政策标题',
    minortitle: '政策全文',
    text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
    user_img: '',
    comment: '发表评论内容',
  },
  {
    id: 4,
    date: '5/17',
    time: '12:00',
    platform: 'XX平台',
    title: '最新政策标题',
    minortitle: '政策全文',
    text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
    user_img: '',
    comment: '发表评论内容',
  },
  {
    id: 5,
    date: '5/17',
    time: '12:00',
    platform: 'XX平台',
    title: '最新政策标题',
    minortitle: '政策全文',
    text: '开年后，地产又一剂“猛药”政策来了，五年期LPR超预期下调25BP，迎有史以来最大降幅，市场人士普遍认为，此举防范地产风险信号意义强烈，楼市有望获提振。',
    user_img: '',
    comment: '发表评论内容',
  },
])
</script>

<template>
  <HeaderList />
  <CenterList />
  <view class="hot-topic">
    <view class="hot-title">热门话题</view>
    <view class="topic-box">
      <view v-for="(item, index) in hotTopicData" :key="index" class="list-box">
        <view class="text-icon">#</view>
        <view class="text">{{ item.text }}</view>
      </view>
    </view>
  </view>
  <view class="hot-spot">
    <view class="hot-header">
      <view class="left">
        <view class="hot-title">热点解读</view>
      </view>
      <view class="right">
        <view class="circle">NEW</view>
      </view>
    </view>
    <view class="hot-box">
      <view v-for="(item, index) in hotSpotData" :key="index" class="list-box">
        <view class="time"><span class="date">{{ item.date }}</span>|{{ item.time }}</view>
        <view class="info-box">
          <view class="title"><span class="platform">{{ item.platform }}</span>：{{ item.title }}</view>
          <view class="minor-title">{{ item.minortitle }}：</view>
          <view class="text">{{ item.text }}</view>
          <view class="comment-box">
            <view class="comment-list">
              <img src="" alt="" class="user-img" />
              <view class="comment">{{ item.comment }}</view>
            </view>
          </view>
          <view class="footer">
            <view class="num-box">
              <veiw class="column">
                <uni-icons type="eye" color="#cdcdcd" size="22"></uni-icons>
                <view class="data-text">1万浏览量</view>
              </veiw>
              <veiw class="column">
                <uni-icons type="chat" color="#cdcdcd" size="22"></uni-icons>
                <view class="data-text">50评论</view>
              </veiw>
            </view>
            <view class="feature-box">
              <veiw class="feature-text">查看详情</veiw>
              <uni-icons type="right" color="#F2BB16" size="25"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.hot-topic {
  margin: 0 64rpx;
  padding: 0px;
  height: 300rpx;
  flex-wrap: wrap;
  align-items: center;
  align-items: center;

  .hot-title {
    margin-top: 0;
    width: 200rpx;
    height: 44rpx;
    font-size: 0.8533rem;
    font-family: STZhongsong, STZhongsong-400;
    font-weight: 400;
    color: #000000;
    line-height: 21px * 2;
    background-image: linear-gradient(0deg, #f8d770 50%, rgba(0, 0, 0, 0) 50%);
    font-size: 23px;
  }

  .topic-box {
    display: flex;
<<<<<<< HEAD
    // align-items: center;
    // justify-content: center;
=======
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 18rpx 0;
>>>>>>> 786c3a4bc764c0773fa1f52ed6a488731747567e

    .list-box {
      display: flex;
      align-items: center;
      height: 58rpx;
      padding: 0px 12rpx;
      margin: 10rpx 0px;
      font-size: 13px;
      font-weight: 400;
      background: #fffefe;
      border-radius: 20px;
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

      .text-icon {
        width: 32rpx;
        height: 34rpx;
        color: #f3b600;
        text-align: center;
        font-weight: 950;
        background: #000000;
        border-radius: 50%;
      }

      .text {
        margin-left: 10px;
      }
    }

    .list-box:last-child {
      justify-self: flex-start;
    }
  }
}

.hot-spot {
  margin: 0 64rpx;

  .hot-header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
    padding-bottom: 10px;

    .left {
      flex-grow: 1;

      .hot-title {
        margin-top: 0;
        width: 200rpx;
        height: 44rpx;
        font-size: 0.8533rem;
        font-family: STZhongsong, STZhongsong-400;
        font-weight: 400;
        color: #000000;
        line-height: 21px * 2;
        background-image: linear-gradient(0deg, #f8d770 50%, rgba(0, 0, 0, 0) 50%);
        font-size: 23px;
      }
    }

    .right {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;

      .circle {
        width: 106px;
        height: 52px;
        font-size: 24px;
        font-family: STZhongsong, STZhongsong-400;
        font-weight: 400;
        text-align: center;
        line-height: 52px;
        color: rgba(245, 209, 100, 0.61);
        background: linear-gradient(0deg, #fffaec 0%, #ffffff);
        border-radius: 50%;
        box-shadow: 3px -11px 28.4px 0px rgba(245, 209, 100, 0.28) inset,
          0px 4px 4px 0px rgba(155, 118, 9, 0.26), 0px -3px 4px 0px rgba(255, 255, 255, 0.38) inset;
        transform: translateY(5px);
      }
    }
  }

  .hot-box {
    .list-box {
      position: relative;
      overflow: visible;

      width: 291px;
      padding: 5px 0px;

      &::before {
        position: absolute;
        content: '';
        z-index: 9;
        width: 12px;
        height: 12px;
        margin: 3px 5px;
        border-radius: 50%;
        background-color: #000000;
      }

      &::after {
        position: absolute;
        content: '';
        width: 2px;
        height: 220px;
        top: 12px;
        left: 10px;
        bottom: -20px;
        background-color: #000000;
      }

      .time {
        margin: 0px 20px;
        height: 14px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-500;
        color: #000000;
        line-height: 19px;

        .date {
          font-size: 16px;
          font-weight: 550;
        }
      }

      .info-box {
        width: 263px;
        height: 168px;
        margin: 10px 28px;
        font-family: PingFang SC, PingFang SC-500;
        color: #333333;
        font-weight: 550;
        font-size: 11px;
        background: #fffefe;
        border-radius: 10px;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

        .title {
          padding: 21px 0px 12px 25px;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-500;
          font-weight: 550;
          line-height: 19px;

          .platform {
            color: #f2bb16;
          }
        }

        .minor-title {
          margin: 0px 25px;
          line-height: 15px;
          letter-spacing: 0.04px;
        }

        .text {
          width: 214px;
          height: 15 * 2px;
          margin: 12px 0px 7px 25px;
          overflow: hidden;
          text-overflow: ellipsis;
          letter-spacing: 0.04px;
          overflow-wrap: break-word;
          white-space: break-spaces;
          line-height: 15px;
        }

        .comment-box {
          display: flex;
          margin: 0px 25px;

          .comment-list {
            position: relative;
            display: flex;
            align-items: center;
            height: 17px;
            overflow: hidden;

            .user-img {
              position: absolute;
              width: 17px;
              height: 17px;
              border-radius: 50%;
              overflow: hidden;
              background-color: azure;
            }

            .comment {
              width: 92px;
              height: 14px;
              margin: 0px 7px;
              background: #f1f1f1;
              border-radius: 15px;
              font-size: 10px;
              font-family: PingFang SC, PingFang SC-500;
              font-weight: 500;
              text-align: CENTER;
              color: #333333;
              line-height: 12px;
            }
          }
        }

        .footer {
          display: flex;
          align-items: center;
          height: 13px;
          margin: 10px 0px 0px 25px;

          .num-box {
            display: flex;
            justify-content: space-between;

            .column {
              display: flex;
              align-items: center;
              margin: 0px 10px 0px 0px;

              .icon {
                margin: 0px 5px;
              }

              .data-text {
                height: 12px;
                font-size: 10px;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #cdcdcd;
                line-height: 12px;
              }
            }
          }

          .feature-box {
            display: flex;
            flex-grow: 1;
            align-items: center;
            justify-content: flex-end;
            margin: 0px 25px 0px 0px;

            .feature-text {
              font-size: 10px;
              font-family: PingFang SC, PingFang SC-500;
              font-weight: 500;
              text-align: CENTER;
              color: #f2bb16;
              line-height: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
